<template>
    <div class="View">
        <div class="tabs">
            <div class="btn activeBtn">
                <el-button type="primary">抽出条件</el-button>
            </div>
        </div>

        <div class="row">
            <div class="label">
                スプールNo.
            </div>
            <el-input class="ipt" v-model="Data.C01" @input="Data.C01 = $setMaxLength(Data.C01, 25)"></el-input>
        </div>
        <div class="row">
            <div class="label">
                C.L.番号
            </div>
            <el-input class="ipt" v-model="Data.C02" @input="Data.C02 = $setMaxLength(Data.C02, 60)"></el-input>
        </div>
        <div class="row">
            <div class="label">
                影響度
            </div>
            <el-select class="long-ipt" placeholder=" " v-model="Data.C03">
                <el-option v-for="item in listBox.impList" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
        </div>
        <div class="row">
            <div class="label">
                重災管理
            </div>
            <div style="border: 1px solid #DCDFE6; width: 380px;height: 32px;display: flex;align-items: center;">
                <el-radio-group v-model="Data.C04">
                    <el-radio style="margin:0 15px 0 15px" label="0">{{ listBox.heavyList[0]
                        }}</el-radio>
                    <el-radio style="margin:0 15px 0 15px" label="1">{{ listBox.heavyList[1]
                        }}</el-radio>
                </el-radio-group>
            </div>
        </div>


        <div class="row">
            <div class="label">
                リスクレベル
            </div>
            <el-select class="short-ipt" placeholder=" " v-model="Data.C05_L">
                <el-option v-for="item in listBox.calcSymb_56L" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
            <el-input class="ipt2" v-model="Data.C05_R"
                @input="Data.C05_R = Data.C05_R == 'A' || Data.C05_R == 'B' || Data.C05_R == 'C' || Data.C05_R == 'D' ? Data.C05_R : null"></el-input>
        </div>
        <div class="row">
            <div class="label">
                漏洩確率
            </div>
            <el-select class="short-ipt" placeholder=" " v-model="Data.C06_L">
                <el-option v-for="item in listBox.calcSymb_56L" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
            <el-input class="ipt1" v-model="Data.C06_R"
                @input="Data.C06_R = $setMyNum(Data.C06_R, '1 - 0') > 5 ? '5' : $setMyNum(Data.C06_R, '1 - 0')"></el-input>
        </div>
        <div class="row">
            <div class="label">
                余寿命
            </div>
            <el-select class="short-ipt" placeholder=" " v-model="Data.C07_L">
                <el-option v-for="item in listBox.calcSymb_78L" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
            <el-input class="ipt1" v-model="Data.C07_R" @input="Data.C07_R = $setMyNum(Data.C07_R, '2 - 2')"></el-input>
        </div>
        <div class="row">
            <div class="label">
                リスクベース余寿命
            </div>
            <el-select class="short-ipt" placeholder=" " v-model="Data.C08_L">
                <el-option v-for="item in listBox.calcSymb_78L" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
            <el-input class="ipt1" v-model="Data.C08_R" @input="Data.C08_R = $setMyNum(Data.C08_R, '2 - 2')"></el-input>
        </div>



        <footer class="footer-view">
            <el-button @click="clearFn(false)">{{ $t("message.planView.btn.clear") }}</el-button>
            <el-button type="primary" @click="saveFn">{{ $t("message.planView.btn.get") }}</el-button>
            <el-button type="warning" @click="close">
                {{ $t("message.public.close") }}
            </el-button>
        </footer>
    </div>
</template>

<script>

import { AddApprovalUserCodSource, GetApprovalUserCodSource, GetApprovalCodSource, ClearApprovalUserCodSource } from "@/api/api1";
import { GetClearLineIndexCondMsg } from "@/api/api";
import { getLocalStorage } from "@/utils/storage";
import eventBus from "@/eventBus/bus";
import _ from 'lodash-es';
import { showLoading, hideLoading } from "@/utils/loading";
export default {
    name: "Dialog2",
    data() {
        return {
            listBox: {
                heavyList: ['', ''],
            },
            Data: {
                "C01": null,
                "C02": null,
                "C03": 0,
                "C04": "0",
                "C05_L": 0,
                "C05_R": null,
                "C06_L": 0,
                "C06_R": null,
                "C07_L": 0,
                "C07_R": null,
                "C08_L": 0,
                "C08_R": null
            },

        };
    },
    props: [],
    components: {},
    watch: {},
    methods: {


        async clearFn(isConfirm) {
            this.Data = this.getDefaultData();

            // let res = await GetClearLineIndexCondMsg({});
            // if (res.data.code == 451) {
            //     this.$confirm(res.data.msg, '', {
            //         confirmButtonText: 'OK',
            //         cancelButtonText: 'Cancel',
            //         type: 'warning'
            //     }).then(async () => {
            //         let res = await ClearApprovalUserCodSource({});
            //         if (res.data.code == 0) {
            //             this.$message({
            //                 type: 'success',
            //                 message: res.data.msg
            //             });
            //             this.$emit('isDialog2ActiveFn2', !_.isEqual(this.getDefaultData(), this.getDefaultData()));
            //             this.$emit('GetLineIndexListApi');
            //             // this.$emit('showRetrievalBtn2', 'hidden')

            //             this.$emit('isDialog2ActiveFn2', !_.isEqual(this.Data, this.getDefaultData()))
            //             this.$emit('getListComboxApi');
            //             this.$emit('showRetrievalBtn2', 'hidden')

            //         } else {
            //             this.$alert(res.data.msg, '', {
            //                 confirmButtonText: 'OK',
            //                 type: 'warning',
            //             });
            //         }
            //     }).catch(() => {

            //     });
            // }
        },
        // 抽出
        async saveFn() {
            let dataJson = {
                ...this.Data
            }
            let res = await AddApprovalUserCodSource(dataJson);
            if (res.data.code != 0) {
                this.$alert(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });

                return
            }
            this.$emit('isDialog2ActiveFn2', !_.isEqual(this.Data, this.getDefaultData()))
            this.$emit('resetATableFn');
            this.$emit('showRetrievalBtn2', 'hidden')
        },
        close() {
            this.$emit('showRetrievalBtn2', 'hidden')
        },
        getDefaultData() {
            return {
                "C01": null,
                "C02": null,
                "C03": 0,
                "C04": "0",
                "C05_L": 0,
                "C05_R": null,
                "C06_L": 0,
                "C06_R": null,
                "C07_L": 0,
                "C07_R": null,
                "C08_L": 0,
                "C08_R": null
            }
        },
        // 获取用户的抽出条件
        async GetApprovalUserCodSourceApi() {
            this.Data = {};
            const dataJson = {};
            showLoading();
            const res = await GetApprovalUserCodSource(dataJson);
            hideLoading();
            //  NO Data
            if (res.data.code != 0 || !res.data.data.length) {
                this.$emit('isDialog2ActiveFn2', false)
                this.clearFn();
                return
            }
            if (res.data.code == 0 && res.data.data.length > 0) {
                let temp = {};
                res.data.data.forEach(item => {
                    temp[item.key] =
                        item.key == 'C03' || item.key == 'C05_L' || item.key == 'C06_L' || item.key == 'C07_L' || item.key == 'C08_L' ? Number(item.label) :
                            item.label;
                });
                this.Data = temp;

                console.log('GetApprovalUserCodSourceApi', this.Data);

                this.$emit('isDialog2ActiveFn2', !_.isEqual(this.Data, this.getDefaultData()))
            }
        },

        // 获取下拉框的集合
        async GetApprovalCodSourceApi() {
            this.listBox = {
                //  解决警告问题
                heavyList: ['', ''],
            };
            let dataJson = {}
            showLoading();
            const res = await GetApprovalCodSource(dataJson);
            hideLoading();
            this.listBox = res.data.data;

            this.GetApprovalUserCodSourceApi();
        },

    },
    created() {

    },
    mounted() {
        this.GetApprovalCodSourceApi();

    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.View {
    .row {
        width: 100%;
        display: flex;
        // justify-content: start;
        margin-top: 12px;
        align-items: center;
        padding-left: 16px;

        .label {
            // width: 145px;
            min-width: 145px;
            height: 32px;
            display: flex;
            align-items: center;
        }

        .ipt {
            width: 380px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;

            }
        }

        .right {

            ::v-deep .el-input__inner {
                text-align: right;

            }
        }

        .long-ipt {
            width: 380px;
            height: 32px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
            }

            ::v-deep .el-input__inner:focus {
                border: 1px solid #dcdfe6;
            }

            ::v-deep .el-input__icon {
                line-height: 32px;
                color: #909399;
            }

            ::v-deep .el-input__suffix {
                width: 32px;
                right: 0;
                background: #dee0e3;
            }
        }


        .ipt1 {
            width: 180px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
                text-align: right;
            }
        }

        .ipt2 {
            width: 180px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
                text-align: left;
            }
        }

        .short-ipt {
            width: 180px;
            height: 32px;
            margin-right: 20px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
            }

            ::v-deep .el-input__inner:focus {
                border: 1px solid #dcdfe6;
            }

            ::v-deep .el-input__icon {
                line-height: 32px;
                color: #909399;
            }

            ::v-deep .el-input__suffix {
                width: 32px;
                right: 0;
                background: #dee0e3;
            }
        }

        .picker {
            // width: 175px;
            height: 32px;
            // margin: 0px 10px;

            ::v-deep .el-input__inner {
                width: 100%;
                height: 32px;
            }

            ::v-deep .el-input__suffix {
                background: transparent;
            }

            ::v-deep .el-input__icon {
                line-height: 100%;
            }
        }

    }
}

.tabs {
    display: flex;
    padding: 16px 16px 0 16px;
    // height: 64px;
    border-bottom: 1px solid #8e8e883b;

    .btn {
        width: 50% !important;
        // border: 1px solid #C3C3C3;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 0;

        button {
            width: 100% !important;
            border-radius: 0;
        }

        // &:nth-child(2) {
        //     border-left: 0;
        //     border-right: 0;
        // }

        // span {
        //     margin-left: 8px;
        // }
    }

    .activeBtn {
        button {
            background-color: #106EBE;
            color: #FFF;
        }
    }
}

.content {
    width: 100%;
    height: calc(100% - 110px);
    // background-color: red;
    margin-top: 25px;
    overflow-y: scroll;
    padding-bottom: 50px;
}

.footer-view {
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    height: 47px;
    padding: 0 15px;
    border-top: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    background: #ffffff;

    button {
        min-width: 82px;
        height: 32px;

        // border: 1px solid #d9d9d9;
        margin-right: 12px;
        border-radius: 4px;
    }

    button:nth-child(2) {
        // background: #106ebe;
        // color: #fff;
        padding: 0 15px;
    }

    button:nth-child(3) {
        position: absolute;
        // background: #eb7421;
        // color: #fff;
        right: 0px;
    }
}
</style>
